<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Popover - Size</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <script type="module">
      import { popoverController } from '../../../../dist/ionic/index.esm.js';
      window.popoverController = popoverController;
    </script>
    <style>
      ion-app > ion-content {
        --background: #dddddd;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-row-gap: 170px;
        grid-column-gap: 20px;

        padding: 100px;
      }
      .grid-item {
        margin: 0 auto;
      }
      h2 {
        font-size: 12px;
        font-weight: normal;

        color: #6f7378;

        margin-top: 10px;
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Popover - Size</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding">
        <div class="grid">
          <div class="grid-item">
            <h2>Cover</h2>
            <ion-button id="cover-trigger">Trigger</ion-button>
            <ion-popover show-backdrop="false" class="cover-popover" trigger="cover-trigger" size="cover">
              <ion-content class="ion-padding"> My really really really really long content </ion-content>
            </ion-popover>
          </div>
          <div class="grid-item">
            <h2>With Event</h2>
            <ion-button id="event-trigger" onclick="openPopover('event-popover', event, 'false')">Trigger</ion-button>
          </div>

          <div class="grid-item">
            <h2>Auto</h2>
            <ion-button id="auto-trigger">Trigger</ion-button>
            <ion-popover show-backdrop="false" class="auto-popover" trigger="auto-trigger">
              <ion-content class="ion-padding"> My really really really really long content </ion-content>
            </ion-popover>
          </div>
          <div class="grid-item">
            <h2>No Event</h2>
            <ion-button id="no-event-trigger" onclick="openPopover('no-event-popover', null, 'true')"
              >Trigger</ion-button
            >
          </div>
        </div>
      </ion-content>
    </ion-app>

    <script>
      class PopoverComponent extends HTMLElement {
        constructor() {
          super();
        }

        connectedCallback() {
          this.innerHTML = `
            <ion-content class="ion-padding">
              My really really really really long content
            </ion-content>
          `;
        }
      }

      customElements.define('popover-component', PopoverComponent);

      const openPopover = async (cssClass, ev, showBackdrop) => {
        const popover = await popoverController.create({
          component: 'popover-component',
          cssClass,
          size: 'cover',
          event: ev,
          showBackdrop,
        });
        await popover.present();
      };
    </script>
  </body>
</html>
